<html>
<head>
	<title>Options</title>
	<script src="storage.js"></script>
	<script src="jquery.js"></script>
	<script type="text/javascript">
		var locale = chrome.i18n.getMessage; // Short-hand
		var closePage = false;
		$(document).ready(function (){
			loadSettings();

			//Localization
			$("#saveBtn").text(locale("save"));
			$("#saveCloseBtn").text(locale("saveAndClose"));
			$("#closeBtn").text(locale("close"));
			$("h1:first").text(locale("options"));

			for(var key in settings){
				var temp = "<tr><td>" + settings[key].text + "</td>";
				temp += "<td>";
				if(settings[key].type == "int" || settings[key].type == "string"){
					temp += "<input type='text' id='" + key + "' value='" + settings[key].value + "'></input>";
				}
				else if(settings[key].type == "bool"){
					temp += "<input type='checkbox' id='" + key + "' " + ((settings[key].value=="true") ? " checked='checked' " : "") + "></input>";
				}
				temp += "</td>";
				temp += "<td>" + settings[key].comment + "</td></tr>";
				$("#options").prepend(temp);
			}


		});
		function update(){
			for(var key in settings){
				switch(settings[key].type){
					case "bool":
						settings[key].value = $("#" + key).attr("checked");
						break;
					default:
						settings[key].value = $("#" + key).val();
						break;
				}
			}
			saveSettings();
			chrome.extension.sendRequest({type: "refreshStorage"}, function(response) {
          		if(response.ok){
					$("#status").text("Saved!");
					var t=setTimeout("$('#status').text('');", 4000);
					if(closePage)
						window.close();
				}
			});
		}
	</script>
</head>
<body style="font-family:sans-serif;">
	
	<h1>Options</h1>
	<table id="options">
		<tr>
			<td colspan="2">
				<button id="saveBtn" onclick="update();">Save</button>
				<button id="saveCloseBtn" onclick="closePage=true;update();">Save & Close</button>
				<button id="closeBtn" onclick="window.close();">Close page</button>
			</td>
			<td><span id="status"></span></td>
		</tr>
	</table>
</body>
</html>
